<template>
    <div>
      <p v-for="item in 10" :key="item">123</p>
      <br>
      <p v-for="(item,index) in 10 " :key="'second' + index">{{ index }} - {{ item }}xx</p>
      <br>
      <h1>名单</h1>
      <p v-for="(name,index) in nameArr" :key="'name' +index">{{ index + 1 }} - {{ name }}</p>
      <h1>用户信息</h1>
      <ul>
        <li v-for="(item,key) in obj" :key="key">{{ key }}-{{ item }}</li>
      </ul>
      <h1>数组对象</h1>
      <table border cellspacing="0" >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
        <tr v-for="(obj,index) in userlist" :key="obj.id">
        <td>{{ index+1 }}</td>
        <td>{{ obj.name }}</td>
        <td>{{ obj.age }}</td>
        <td>{{ obj.sex === "male" ? '男' : '女'}}</td>
        </tr>
      </table>
      <br v-for="item in 100 " :key="'br' + item">
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
        nameArr:['关羽','张飞','赵云','黄忠','马超'],
        obj:{
          name: 'cc',
          age: '28',
          sex: 'male'
        },
        userlist:[{
          id: '1111',
          name: 'cx',
          age: '15',
          sex: 'male'
        },{
          id: '222',
          name: 'yy',
          age: '20',
          sex: 'female'
        },{
          id: '333',
          name: 'dd',
          age: '18',
          sex: 'female'
        },{
          id: '444',
          name: 'ds',
          age: '20',
          sex: 'male'
        },{
          id: '555',
          name: 'jg',
          age: '19',
          sex: 'male'
        }]
      }
    }
  }
  </script>
  
  <style>
  
  </style>